<template>
  <page-container>
    <h1 class="title">对话弹出，侧边弹出，页面弹出</h1>
    <el-button @click="openDialog">对话框</el-button>
    <el-button @click="openDrawer">边弹出</el-button>
    <el-button @click="openPage">页面弹窗</el-button>
  </page-container>
</template>

<script lang="ts" setup name="ExOpenLayer">
  import useFloat from '@/hooks/useFloat';
  import EditForm from './editForm.vue';

  defineOptions({ components: { EditForm } });

  const dailogFloat = useFloat('dialog', EditForm);

  const drawerFloat = useFloat('drawer', EditForm);

  const pageFloat = useFloat('page', EditForm);

  const openDrawer = () => {
    drawerFloat.open({
      title: '标题2',
      props: {
        onConfirm: () => {
          drawerFloat.close();
        },
        onCancel() {
          drawerFloat.close();
        },
        onOpenMore() {
          drawerFloat.close().then(() => {
            openDrawer();
          });
        }
      }
    });
  };

  const openDialog = () => {
    dailogFloat.open({
      title: '对话框',
      width: 800,
      props: {
        onConfirm: () => {
          dailogFloat.close();
        },
        onCancel() {
          console.log('??');
          dailogFloat.close();
        },
        onOpenMore() {
          openDialog();
        }
      }
    });
  };

  const openPage = () => {
    pageFloat.open({
      title: '页面弹窗',
      full: true,
      props: {
        onConfirm: () => {
          pageFloat.close();
        },
        onCancel() {
          pageFloat.close();
        },
        onOpenMore() {
          openPage();
        }
      }
    });
  };
</script>

<style lang="less" scoped>
  .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px;
  }
</style>
